<div id="content" class="car-path">
	<div class="row s_page_title  y_map_title">
		<sa-big-breadcrumbs [items]="['车辆定位管理','车辆轨迹']" icon="fa fa-car" class="col-xs-12 col-sm-7 col-md-7 col-lg-4"></sa-big-breadcrumbs>
	</div>
	<div style="position: relative;min-height: 600px;border-radius: 0 4px 4px 0;" id='wrap'> 
			<!--<div class="treeTop">
				<div class="treeTitle"> <i class="fa fa-car" ></i> 车辆列表
				<button class="dragBtn btn btn-primary btn-primary" id='dragBtn' (mousedown)='draggingEvent()' title="拖拽改变盒子大小"> ↔ </button>
			</div>-->
		<div  class="col-xs-12 col-sm-6 col-md-3 no-padding">
			<car-trees (outerSend)="getCartreeMess($event)" [height]="708"></car-trees>

		</div>
	
		<div class="treeRight well well-sm col-xs-12 col-sm-6 col-md-9" style="padding:0;margin: 0;padding-top: 12px;">
		<div class="speedBar" [hidden]='!isBarView'>
			<p class="bar_title">拖拽控制柄设置速度界点</p>
			<div style="position: relative;" >
		        <div class="form-group fix_bar">
		        	<div class="leftbar" [ngStyle]='leftbarStyle()'> </div>
		        	<div class="rightbar" [ngStyle]='rightbarStyle()'> </div>
		            <input id="barInput" ionSlider type="text" data-min="0" data-max="150" [attr.data-from]="leftbarWidth"
		                   [attr.data-to]="rightbarWidth" data-type="double" data-step="1" data-postfix="km/h" data-prettify="false"
		                   data-hasgrid="true"  >
		        </div>
	        </div>
	        <div>
	        	<ul class="barSpeed">
	        	<li><span></span>0 </li>
	        	<li><span></span></li>
	        	<li><span></span></li>
	        	<li><span></span></li>
	        	<li><span></span>40</li>
	        	<li><span></span></li>
	        	<li><span></span></li>
	        	<li><span></span></li>
	        	<li><span></span>80</li>
	        	<li><span></span></li>
	        	<li><span></span></li>
	        	<li><span></span></li>
	        	<li><span></span>120</li>
	        	<li><span></span></li>
	        	<li><span></span></li>
	        	<li><span></span>150</li>
	        	</ul>
	        </div>
	        <div class="btnGroup"> 
	        	<button type="button" class="btn btn-primary btn-xs saveColor" (click)='saveColorSpeed()'> 确定</button>
	        	<button type="button" class="btn btn-default btn-xs" (click)='openBarView("close")'> 取消</button>
	        </div>
	        
        </div>
		<!--轨迹颜色的控制条end-->
		<div class="widget-box">
			<div class="widget-body">
				<div class="widget-main">
					<input type="hidden" id="companyId" name="companyId" value="">
					<div class="row">
						<div class="col-xs-12" class="s_map_btn" style="">
							<div class="form-group col-xs-12 col-md-6 col-lg-2 mediaDiv">
								<label class="control-label col-xs-4 carNumberLabel" title="车牌号" for="carNumber">车牌号</label>
								<div class="clearfix col-xs-8 no-padding">
									<input class="form-control carNumber" name="carNumber" placeholder="车牌号" id="carNumber" type="text" [(ngModel)]='carNumber'>
								</div>
							</div>
							<div class="form-group col-xs-12 col-md-6 col-lg-2 mediaDiv" >
								<!-- device id start -->
								<label class="control-label col-xs-4 deviceIdLabel"  title="设备ID" for="deviceId" >设备ID</label>
								<div class="clearfix col-xs-7 no-padding">
									<input class="form-control deviceId" placeholder="设备ID" name="deviceId" id="deviceId" type="text" [(ngModel)]='deviceId'>
								</div>
							</div>
							<div class="form-group col-xs-12 col-md-8 col-lg-4 no-padding" >
								<!-- datepicker start -->
								<div class="input-daterange input-group" style="border: 1px solid #ccc;border-radius: 4px;overflow: hidden;">
									<input type="text" class="form-control" autocomplete="off" id="datetimepicker1" [(ngModel)]='startTime' style="padding: 0 12px;">
									<span class="input-group-addon" style="border: none;background-color: #ccc;color: #333;">至</span>
									<input type="text" class="form-control" autocomplete="off" id="datetimepicker2" [(ngModel)]='endTime' style="padding: 0 12px;">
								</div>
							</div>
							<button type="button" class="btn btn-primary btn-sm" style="padding: 4px 12px;" (click)='lookTrajectory()'>
								查看轨迹
							</button>
							
							<button type="button" class="btn btn-primary btn-sm" style="padding: 4px 12px;" (click)='goRailManage()' *ngIf="isEnterRaill">
								返回围栏管理
							</button>
							

						</div>
						<div class="col-xs-12" style="position: relative;">
							
							<div class=" seachDiv col-xs-md col-lg-3 " style="">
								<div id="r-result"  class="input-group">
									<input type="text" id="suggestId" style="min-width: 148px;" placeholder='请输入需要搜索的地址' class="col-xs-10 form-control" />
									<span class="input-group-btn">
										<button type="button" class="btn btn-primary btn-sm" id="search">
											<i class="ace-icon fa fa-search icon-on-right bigger-110"></i>搜索
										</button>
									</span>
								</div>
								<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
							</div>
							
							<!--围栏标注部分-->
							<div  style="position: absolute;right: 2%;top: 20px;z-index:9" class="enclosure"> 
								<ul>
									<li	 (click)="listenerRail(1)"  class="rail1" >
										<img src="assets/img/deployIcon/icon2.png">
										<span class="railType railHover1">标注点</span>
									</li>
									<li  (click)="listenerRail(2)"  class="rail2">
										<img src="assets/img/deployIcon/icon1.png">
										<span class="railType railHover2">多边形</span>
									</li>
								
								</ul>
								
							</div>
							
							<!--围栏信息部分-->
							<div  class="deployRail row" [hidden]='!isRailView'>
								<div class="deployTitle">新建标注点 </div>
								<div style="padding-top:12px;">
									<form id="myForm">
										<div class="row" style="margin-bottom: 2px;">
											<div class="form-group">
												<label class="control-label col-sm-2 deployLabel" >*名称</label>
												<div class="col-sm-10">
													<div class="clearfix">
														<input class="form-control styleInp" name="name" [(ngModel)]='railName' type="text" placeholder="输入围栏名称">
													</div>
												</div>
											</div>
										</div>	
										<div class="row" >
											<div class="form-group">
												<label class="control-label col-sm-2 deployLabel" >*公司</label>
												<div class="company_tree col-sm-10" style="display: inline-block;vertical-align: middle;">
 													<div class="clearfix" style="position: relative;">
 														<div class="s_hover_box s_fix_radius" style="width: 100%;border-radius: 0;">
															<input class="form-control tree_company_input"  id="company" name="selectedCompanyName" (input)="companySearch()" autocomplete="off" [(ngModel)]='selectedCompanyName' (click)="companyClick()" type="text" placeholder="请选择或输入关键字" />
															<div class="s_del_icon" (click)='delText()'>x</div>
 														</div>
														<div class="s_tree_box" id="tree_box">
															<div class="vision_tree" id="vision_tree">
																<div id="tree"></div>
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
										<div class="row" >
											<div class="form-group">
												<label class="control-label col-sm-2 deployLabel" >*类型</label>
												<div class="col-sm-10">
													<div class="clearfix">
														<select class="deployType form-control" name="typeId"  [(ngModel)]='deployType'>
															<option value="">无</option>
															<option *ngFor='let item of deployTypeList' [value]="item.value">{{item.name}}</option>
														</select>
													</div>
												</div>
											</div>
										</div>
										
										
										<div class="row"  *ngIf='isRangeView' style="margin-bottom:5px;">
											<div class="form-group">
												<label class="control-label col-sm-2 deployLabel" >范围</label>
												<div class="col-sm-10">
													<div class="clearfix">
														<!--<select class="range form-control" name="radius" [(ngModel)]='railRange' (change)='rangeChange($event.target.value)'>
															<option value="">无</option>
															<option *ngFor='let item of railRangeList' value="{{item}}">{{item}}米</option>
														</select>-->
														<div class="range_tree" style="display: inline-block;vertical-align: middle;">
															<div class="clearfix" style="position: relative;">
																<div class="s_hover_box s_fix_radius">
																	<input class="form-control tree_range_input" (change)='rangeChange(railRange)' id="range" name="selectedRange" (input)="rangeSearch()" autocomplete="off" [(ngModel)]='railRange' (click)="rangeClick()" type="number" placeholder="请选择或输入关键字" />
																	<div class="s_del_icon" (click)='delRange()'>x</div>
																</div>
																<div class="s_tree_box" id="tree_selectedRange" style="min-width: 194px;height: 320px;">
																	<div class="vision_tree" id="vision_rangetree">
																		<div id="rangeTree" class="rangeTree"></div>
																	</div>
																</div>
															</div>
												      	</div>
														<!--<select   class="select2"  id="selectRange">
															<option value=''></option>
														</select>-->
													</div>
												</div>
											</div>
										</div>	
										<div class="row" style="margin-bottom: 2px;">
											<div class="form-group">
												<label class="control-label col-sm-5 deployLabel" >*围栏停留时长(分)</label>
												<div class="col-sm-7">
													<div class="clearfix">
														<input class="form-control styleInp" name="stayTime" [(ngModel)]='stayTime' type="tel" placeholder="输入围栏停留时长(分)">
													</div>
												</div>
											</div>
										</div>	
										
										<!--<div class="row">
											<div class="col-xs-6" style="margin-top: 5px;">
												<span class="col-xs-4" style="padding: 0px 5px;text-align: right;line-height: 28px;">类型 </span>
												<select class="deployType col-xs-7" name="typeId"  [(ngModel)]='deployType'>
													<option value="">无</option>
													<option *ngFor='let item of deployTypeList' value="{{item}}">{{item}}</option>
												</select>
											</div>
											<div class="col-xs-6 rangeWarp" style="margin-top: 5px;" *ngIf='isRangeView'>
												<span class="col-xs-4" style="padding: 0px;line-height: 28px;">范围 </span>
												<select class="range col-xs-8" name="radius" [(ngModel)]='railRange' (change)='rangeChange($event.target.value)'>
													<option value="">无</option>
													<option *ngFor='let item of railRangeList' value="{{item}}">{{item}}米</option>
													
												</select>
											</div>
							
										</div>-->
										<div class="row" style="padding-top:10px;">
											<div class="form-group">
												<label class="control-label col-sm-2 no-padding-right" style="text-align: right;padding: 0;line-height: 28px;">颜色</label>
												<div class="col-sm-9">
													<div class="clearfix">
														<ul class="slectColor">
															<li style="background:#A90329" class="myColor">✓ </li>
															<li style="background:#C79121"> </li>
															<li style="background:#57889C"> </li>
															<li style="background:#AC5287"> </li>
															<li style="background:#356E35"> </li>
														</ul>
													</div>
												</div>
											</div>
										</div>
							
										<div class="checkbox row" style="margin-top: 4px;">
											<span class="col-xs-2"></span>
											<div class="col-xs-10" style="font-size:12px;">
							
												<label class="isAddInput isStation">
													<input name="site" type="checkbox" class="ace" style="width: 16px;height: 16px;top: -4px;cursor: pointer;" [(ngModel)]='isStation'>
													<span class="lbl">设为站点</span>
												</label>
												<!--<span>设为站点  </span>-->
							
												<label class="isAddInput isWeilan" style="margin-left: 22px;">
													<input name="electronicFence" type="checkbox" class="ace"  style="width: 16px;height: 16px;top:-4px;cursor: pointer;" [(ngModel)]='isRail'>
													<span class="lbl">设为电子围栏</span>
												</label>
												<!--<span>  设为电子围栏</span>-->
											</div>
							
										</div>
									</form>
									<div class="row ">
							
										<div class="smaller col-xs-12" style="padding:0;margin: 12px 0;">
											<button class="btn btn-white" id="saveDeployBtn" (click)="saveDeploy(false)">
													保存
												</button>
											<button class="btn btn-white btn-white" (click)="saveDeploy(true)">
													保存新建
												</button>
											<button class="btn btn-white btn-white" (click)="cencelDeploy()">
													取消
												</button>
										</div>
									</div>
								</div>
							</div>
							<div id="baiduMap"  class="fix-maplabel"></div>
							<sa-bmap-tools [baiduMap]="mp" [isShowZoom]='true' baiduMapHeight="110px" [isShowCity]="false"></sa-bmap-tools>
							<!--轨迹颜色的控制条-->
							<button type="button" (click)='openBarView("open")' class="btn btn-primary speedBtn">速度设置</button>
							<div class="chartWarp" [hidden]='!timePlayer'>
								<div id="pointInfo"></div>
								<div [hidden]='!totalDistance' id="mileage"><span>行驶里程：</span>{{totalDistance}}<span> 公里</span></div>
								<button class="closeChart" (click)='closeChartEvent()'>×</button>
								<div id="myChart" class="myChart" style="height: 240px;"></div>
							</div>
							<!--<div class="trajectoryControl" *ngIf='timePlayer'>
								<div class="slowTime"></div>
								<div class="timeline" style="background-color: rgba(255,255,255,0.8);">
									<div class="partial-1">
										<div class="starOpen" (mousemove)="imgMove('star')" (mouseout)="imgOut('star')" (click)="playAndPause()">
											<img src={{playImg}} />
										</div>
										<div class="slow" (mousemove)="imgMove('slow')" (mouseout)="imgOut('slow')" (click)="quickAndSlow()">
											<span class="note">减速x2</span>
											<img src={{moderateImg}} />
										</div>
										<div class="quick" (mousemove)="imgMove('quick')" (mouseout)="imgOut('quick')" (click)="quickAndSlow('quick')">
											<span class="note">加速x2</span>
											<img src={{quickenImg}} />
										</div>
									</div>
									<div class="partial-2">
										<div class="lineView">
											<div *ngFor="let item of lostTimeArr" [ngStyle]="styleMethod(item)"></div>

										</div>
										<div class="progress" [ngStyle]="styleProgress()" (mousedown)="dragMove()"></div>
										<div class="timerPart">
											<ul>
												<li style="width: 51px;float: left;font-size: 12px;">{{playStarTime}}</li>

												<li style="width: 51px;float: right;font-size: 12px;">{{playEndTime}}</li>
											</ul>
										</div>
									</div>
								</div>

								<span class="lookUnlading" name="open" (click)='openUnloadlist()'>
									<i *ngIf='!isTable' class="ace-icon fa fa-angle-double-down"></i>
									<i *ngIf='isTable' class="ace-icon fa fa-angle-double-up"></i>
								</span>
							</div>-->
						</div>
						<div [hidden]="!isTable" class="col-xs-12 scrollTable" id="s_map_ngx_table">
							<sa-widgets-grid>
								<div class="s_table">
									<div sa-widget [editbutton]="false" color="darken" class="clearfix">
										<div>
											<div class="widget-body no-padding">
												<div class="table_scroll">
													<table class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table">
														<thead>
															<tr>
																<th>车牌号</th>
																<th>装货起始时间</th>
																<th>装货结束时间</th>
																<th>装载时间</th>
																<th>卸货起始时间</th>
																<th>卸货结束时间</th>
																<th>卸载时间</th>
																<th>运输时间</th>
																<th>行驶里程(KM)</th>
																<th>平均重量(吨)</th>
																<th>最大重量(吨)</th>
																<th>最大车速(KM/H)</th>
																<th>上货点</th>
																<th>卸货点</th>
															</tr>
														</thead>
														<tbody>
															<tr *ngFor="let row of resultTableData">
																<td>{{row.carNumber}}</td>
																<td>{{row.loadStartDate}}</td>
																<td>{{row.loadEndDate}}</td>
																<td>{{row.loadTime}}</td>
																<td>{{row.unloadStartDate}}</td>
																<td>{{row.unloadEndDate}}</td>
																<td>{{row.unloadTime}}</td>
																<td>{{row.transportTime}}</td>
																<td>{{row.distance}}</td>
																<td>{{row.avgWeight}}</td>
																<td>{{row.maxWeight}}</td>
																<td>{{row.maxSpeed}}</td>
																<td>
																 	<span *ngIf="row.loadlng">{{row.loadlng}},<span>{{row.loadlat}}</span></span>
																</td>
																<td>
																	<span *ngIf="row.unloadlng">{{row.unloadlng}},<span>{{row.unloadlng}}</span></span>
																</td>
															</tr>
														</tbody>
													</table>
												</div>
												<div class="table-fix clearfix">
													<paginator [totalRecords]="totalCount" [rows]="pageSize" [currentPage]="curPage - 1" (onPageChange)="paginate($event)">
													</paginator>
													<button type="button" class="btn default refresh_btn" (click)="refresh()"><i class="fa fa-refresh"></i></button>
												</div>
											</div>
										</div>
									</div>
								</div>
							</sa-widgets-grid>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	</div>
</div>